<style>
    .tab a{border-bottom: none;border-radius: 0;}
    .package-box-detail{border:1px solid #ccc;padding: 20px}
    .row{margin-bottom: 20px;}
   @media (min-width: 768px){
       .modal-dialog {  width: 1000px;  margin: 30px auto;}
   }
    th.content{width: 500px;}




</style>
<section class="content">
    <div class="tab">
        <a  class="btn btn-default btn-lg"  ui-sref="package/packageDetail({wxGoodsId:{{ wxGoodsId }}})"  role="button">套餐详情</a>
        <a href='javascript:;' class="btn btn-primary btn-lg"role="button">关联服务</a>
        <a ui-sref="package/packageAgreement({wxGoodsId:{{wxGoodsId}}})" class="btn btn-default btn-lg" role="button">内容协议</a>
        <a href='javascript:;' ui-sref="package/packageList" class="btn btn-primary pull-right">返回上级</a>
    </div>
    <div class=" package-box-detail">
        <div class="table-box">
            <table class="table table-bordered">
                <thead>
                <tr>
                    <th>序号</th>
                    <th>图标</th>
                    <th>服务项目</th>
                    <th class="content">描述</th>
                    <th>类型</th>
                    <th>操作</th>
                </tr>
                </thead>
                <tbody>
                    <tr ng-repeat="n in selectedList">
                        <td>{{$index+1}}</td>
                        <td>
                            <img src="{{basePictureUrl + n.icon}}" alt="" width="80px" height="50px" err-src="./img/img-cover.png">
                        </td>
                        <td>{{n.name}}</td>
                        <td>{{n.content}}</td>
                        <td>
                            <span ng-if="n.serviceType=='1'">url链接</span>
                            <span ng-if="n.serviceType=='2'">电话弹窗</span>
                            <span ng-if="n.serviceType=='3'">文字弹窗</span>
                            <span ng-if="n.serviceType=='4'">随访关联</span>
                        </td>
                        <td>
                            <a href="javascript:;" data-id="{{n.wxGoodsDetailId}}" ng-click="serviceMove($event,'0')">上移</a> |
                            <a href="javascript:;" data-id="{{n.wxGoodsDetailId}}" ng-click="serviceMove($event,'1')">下移</a> |
                            <a href="javascript:;" data-id="{{n.wxServicesId}}" ng-click="serviceDel($event)">删除</a>
                        </td>
                    </tr>
                </tbody>
            </table>
            </div>
        <div class="row">
            <button  class="btn btn-primary" data-toggle="modal" data-target="#myModal">添加服务</button>
        </div>
    </div>
    <!-- 模态框（Modal） -->
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                        &times;
                    </button>
                    <h4 class="modal-title" id="myModalLabel">
                        添加服务
                    </h4>
                </div>
                <div class="modal-body">
                    <table class="table table-bordered text-center">
                        <thead>
                        <tr>
                            <th></th>
                            <th>图标</th>
                            <th>服务项目</th>
                            <th class="content">描述</th>
                            <th>类型</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr ng-repeat=" n in noSelectedList">
                            <td><input type="checkbox" name="servicesRowIds" value="{{n.servicesRowId}}"></td>
                            <td>
                                <img src="{{basePictureUrl + n.icon}}" alt="" width="80px" height="50px" err-src="./img/img-cover.png">
                            </td>
                            <td>{{n.name}}</td>
                            <td>{{n.content}}</td>
                            <td>
                                <span ng-if="n.serviceType=='1'">url链接</span>
                                <span ng-if="n.serviceType=='2'">电话弹窗</span>
                                <span ng-if="n.serviceType=='3'">文字弹窗</span>
                                <span ng-if="n.serviceType=='4'">随访关联</span>
                            </td>

                        </tr>
                        </tbody>
                    </table>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭
                    </button>
                    <button type="button" class="btn btn-primary" ng-click="addServer()">
                        确认选择
                    </button>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal -->
    </div>
</section>